<script lang="tsx">
import { defineComponent, ref, unref } from "vue";
import { Tooltip } from "ant-design-vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import AppSearchModal from "./AppSearchModal.vue";
import { useI18n } from "@/hooks/web/useI18n";

export default defineComponent({
  name: "AppSearch",
  setup() {
    const showModal = ref(false);
    const { t } = useI18n();

    function changeModal(show: boolean) {
      showModal.value = show;
    }

    return () => {
      return (
        <div class="p-1" onClick={changeModal.bind(null, true)}>
          <Tooltip>
            {{
              title: () => t("common.searchText"),
              default: () => <SearchOutlined />,
            }}
          </Tooltip>
          <AppSearchModal
            onClose={changeModal.bind(null, false)}
            visible={unref(showModal)}
          />
        </div>
      );
    };
  },
});
</script>
